import { Form, Row, Col, Input, Button, Table, Spin } from 'antd';
import { Ref, useRef, useState } from 'react';

import { OneModal } from '@/components/one-ui';
import { IOneModalRef } from '@/pages/type';
import { onCloseModalCommon } from '@/utils';
import { SearchOutlined, RedoOutlined } from '@ant-design/icons';

const BaseInfoContractModal = ({ onSave, onClose }: Record<string, any>) => {
  /**弹窗Ref*/
  const oneModalRef: Ref<IOneModalRef> = useRef(null);

  const columns = [
    {
      title: '范本名称',
      dataIndex: 'fullName',
      key: 'fullName',
      width: 200,
    },
    {
      title: '范本描述',
      dataIndex: 'templateInfo',
      key: 'templateInfo',
      width: 180,
    },
    {
      title: '范本状态',
      dataIndex: 'state',
      key: 'state',
      width: 120,
    },
    {
      title: '范本类型',
      dataIndex: 'templateTypeName',
      key: 'templateTypeName',
      width: 200,
    },
    {
      title: '创建人',
      dataIndex: 'createrName',
      key: 'createrName',
    },
  ];

  // 标包数据
  const [dataSource] = useState<Record<string, any>[]>([
    {
      id: 1,
      fullName: '合金材料合同',
      templateInfo: '购买合金材料',
      state: '--',
      templateTypeName: '--',
      createrName: '--',
    },
    {
      id: 2,
      fullName: '特质颜料合同',
      templateInfo: '购买合金材料',
      state: '--',
      templateTypeName: '--',
      createrName: '--',
    },
    {
      id: 3,
      fullName: '特制金属合同',
      templateInfo: '购买合金材料',
      state: '--',
      templateTypeName: '--',
      createrName: '--',
    },
  ]);

  // 选中表格id集合
  const [selectedRow, setSelectedRow] = useState<Record<string, any>>([]);

  /**确认*/
  const onModalOk = () => {
    onSave(selectedRow);
    onCloseModalCommon(oneModalRef);
  };

  /**
   * 表单Form
   * */
  const [searchForm] = Form.useForm();

  /**
   * @onSelectChange 复选框change事件
   * @param keys 表格ID
   * */
  const onSelectChange = (_: React.Key[], rows: Record<string, any>) => setSelectedRow(rows);

  // 底部按钮
  const footerRender = () => {
    return (
      <>
        <Button onClick={() => onCloseModalCommon(oneModalRef)}>取消</Button>
        <Button type={'primary'} onClick={onModalOk}>
          确认
        </Button>
      </>
    );
  };

  return (
    <OneModal
      open={true}
      onCancel={onClose}
      centered={true}
      title={'选择供应商'}
      bodyStyle={{
        height: '500px',
        padding: '5px 0px',
      }}
      width={document.body.clientWidth * 0.6}
      ref={oneModalRef}
      footer={footerRender()}
    >
      <Spin spinning={false}>
        <div>
          <Form form={searchForm}>
            <Row gutter={[8, 0]} style={{ padding: '10px 1rem 0' }}>
              <Col span={4}>
                <Form.Item name="fullName">
                  <Input placeholder="企业名称" allowClear />
                </Form.Item>
              </Col>
              <Col span={20} style={{ textAlign: 'right' }}>
                <Button style={{ margin: '0 7px' }} type="primary" icon={<SearchOutlined />}>
                  查询
                </Button>
                <Button icon={<RedoOutlined />}>重置</Button>
              </Col>
            </Row>
          </Form>
          <div className={'list-table'}>
            <Table
              bordered
              size="small"
              columns={columns}
              dataSource={dataSource}
              loading={false}
              scroll={{ x: 500, y: 500 }}
              rowKey={(record: any) => record?.id}
              rowSelection={{
                type: 'radio',
                onChange: onSelectChange,
              }}
            ></Table>
          </div>
        </div>
      </Spin>
    </OneModal>
  );
};

export default BaseInfoContractModal;
